<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module">
        // ESM ：ES6module
        // 模块化 ：独立命名空间
        // 1.声明 type=module  2.服务器运行 3.js环境会变成严格模式
        // function test(){
        //     console.log(this);
        // }
        // test()
        // 一、导入 import  还有 import函数 二、导出 export  export default
        // 1.导入文件
        // import "./a.js";
        // console.log(a);
        // 2.导入自定义的变量接受
        // import mya from './a.js';
        // console.log(mya);

        // 3.导入 和导出相同的变量
        // import {a,b,c} from './a.js';
        // console.log(a,b,c);

        // 4.导入 自定义和预定义的
        // import mya,{a as d,b,c} from './a.js';
        // // console.log(mya,a,b,c);
        // console.log(d);

        // 5.接受所有导出内容
        // import * as obj from './a.js';
        // console.log(obj);

        // 6.懒加载
        // import * as obj from './a.js';
        import "./a.js";
        document.onclick = async function(){
            // import "./b.js";
            // import函数会返还一个promise对象，里面会有导出的结果
            // import("./b.js").then(res=>{
            //         console.log(res);
            // })
            let res = await import("./b.js");
            console.log(res);
        }

        //练习： 把vue组件区分模块 引入到实例里

    </script>
</body>
</html>